<template>
  <div>
    <Child>
      <template v-for="slot in slots" v-slot:[slot.slotName]="slotProps">
        <!-- <div :key="slot.Id" :someProp="slotProps"></div> -->
        <!-- <component :key="slot.Id" :someProp="slotProps"></component> -->
        <component :key="slot.Id" :someProp="slotProps">{{ slot.slotName }}</component>
      </template>
    </Child>
  </div>
</template>
<script>
import Child from './Child.vue';

export default {
  data() {
    return {
      slots: [
        {
          Id: 1, slotName: 'foo', componentName: 'Foo'
        },
        {
          Id: 2, slotName: 'bar', componentName: 'Bar'
        }
      ]
    }
  },
  components: {
    Child
  }
}
</script>
<style lang="">

</style>